<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <!-- 表单 -->
    <el-form :model="form" :rules="rules" ref="ruleForm">
      <el-form-item label="角色名称" prop="name" :label-width="formLabelWidth">
        <el-input v-model="form.name" placeholder="请输入角色名称"></el-input>
      </el-form-item>
    </el-form>

    <!-- 保存按钮 -->
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="saveOrUpdate" :loading="loading"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
// api
import updateMixins from "@/views/base/updateMixins";
import sysApi from "@/api/sysApi";
import thirdApi from "@/api/thirdApi";

export default {
  name: "sysRoleUpdate",
  props: ["dialogTitle"],
  mixins: [updateMixins],
  data() {
    return {
      // 表单数据
      form: {
        name: "",
      },
      // 表格校验规则
      rules: {
        name: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 之间",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    
    // 清空数据
    clearData() {
      this.form = {
        name: "",
      };
    },
    // 请求数据
    remoteData(row) {
      sysApi.sysRole
        .info(row.id)
        .then((res) => {
          this.form = res.data;
        })
        .catch((error) => {});
    },
    // 新增或编辑
    saveOrUpdate() {
      this.$refs["ruleForm"].validate((valid) => {
        var params = { ...this.form, ...this.meta };
        if (valid) {
          this.showLoading(true);
          if (!params.id) {
            // 新增
            sysApi.sysRole
              .save(params)
              .then((res) => {
                this.showDialog(false);
                this.$parent.querySearchForm();
              })
              .catch((error) => {
                this.showLoading(false);
              });
          } else {
            // 编辑
            sysApi.sysRole
              .update(params)
              .then((res) => {
                this.showDialog(false);
                this.$parent.querySearchForm();
              })
              .catch((error) => {
                this.showLoading(false);
              });
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>